<template>
  <div>
    <a-modal
      v-model="visible"
      :closable="false"
      width="750px"
      on-ok="handleOk"
      :title="auditInfo.statusName || ''"
    >
      <div class="img-list">
        <div
          class="table-img"
          :style="{ background: `url(${item}) no-repeat 50% 50% /cover` }"
          v-for="(item, index) in auditInfo.auditImages || []"
          :key="index"
          @click="preview(index)"
        />
      </div>
      <a-form-model
        :model="form"
        :rules="rules"
        ref="ruleForm"
        labelAlign="left"
        :layout="form.layout"
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 22 }"
      >
        <a-form-model-item label="审核" prop="desc">
          <div style="position: relative">
            <a-input
              type="textarea"
              v-model="form.desc"
              :max-length="200"
              style="height: 98px"
              :disabled="auditInfo.statusName != '待审核'"
            />
            <span class="limitWords">{{ form.desc.length || 0 }}/200</span>
          </div>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <template v-if="auditInfo.statusName == '待审核'">
          <a-button type="danger" @click="checkAudit(6)">驳回</a-button>
          <a-button class="rejectedBtn" @click="checkAudit(4)">拒绝</a-button>
          <a-button type="primary" @click="checkAudit(3)">通过</a-button>
        </template>
        <a-button @click="handleCancel">关闭</a-button>
      </template>
      <preview-img
        :imgList="auditInfo.auditImages"
        :imgIndex="imgIndex"
        ref="previewImg"
      ></preview-img>
    </a-modal>
  </div>
</template>
<script>
import ImageList from "@/views/menuPage/shop/customDecorate/microPage/components/editCustom/components/form/NavBar/ImageList.vue";
import previewImg from "./previewImg.vue";
export default {
  components: { ImageList, previewImg },
  props: {
    auditInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      remark: "",
      visible: false,
      form: {
        layout: "horizontal",
        desc: "",
      },
      rules: {
        desc: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      imgIndex: 0,
      title: "待审核",
    };
  },
  watch: {
    visible(e) {
      if (!e) {
        this.form.desc = "";
        this.$refs["ruleForm"].resetFields();
      } else {
        this.imgIndex = 0;
        console.log(this.auditInfo);
        this.form.desc = this.auditInfo.remark || "";
      }
    },
  },
  methods: {
    // 获取审核数据
    async checkData(auditStatus) {
      const param = {
        id: this.auditInfo?.id,
        auditStatus: auditStatus,
        remark: this.form.desc,
      };
      const res = await this.$post(
        "goldenhome/gh/lottery/admin_/lottery/record/audit",
        param
      );
      if (res && res.returnCode == 1000) {
        this.visible = false;
        this.$emit("initTable");
        this.$message.success(
          auditStatus == 3
            ? "审核通过"
            : auditStatus == 4
            ? "审核拒绝"
            : "审核驳回"
        );
      }
    },
    handleCancel(e) {
      this.visible = false;
    },

    // 删除
    checkAudit(auditStatus) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.$confirm({
            content:
              auditStatus != 3
                ? auditStatus == 4
                  ? "确认拒绝将无法进行修改，审核请联系客户确认上传资料是否有误"
                  : "驳回后不可进行二次审核，需用户重新上传资料，请再次确认是否驳回"
                : "确认通过将无法进行修改，请再次确认资料是否正确",
            okText: "确认",
            cancelText: "取消",
            onOk: () => {
              this.checkData(auditStatus);
            },
            onCancel() {},
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //大图预览
    preview(index) {
      this.imgIndex = index;
      this.$refs.previewImg.visible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.img-list {
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  .table-img {
    width: 100%;
    height: 130px;
    background-size: cover;
    border: 1px solid #eee;
  }
}
.limitWords {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  color: #ccc;
}
.rejectedBtn {
  background: #faad14;
  color: #fff;
  cursor: pointer;
}
/deep/.rejectedBtn.ant-btn:hover {
  border-color: #faad14;
  opacity: 0.8;
}
</style>
